import React, { VFC, useEffect, useState } from "react"
import { Button, Select, Row, Col } from 'antd';
import { useHistory } from "react-router-dom";
import { getPhaseCoursewareList} from '@services/index';
import { GetDIC } from '@api/index'
import Edit from './edit'
import PageContent from '@layout/PageContent';
import Empty from '@components/empty';
const { Option } = Select;
import { FILe_URL } from "@tools/config";
import './style.css'

const Explain:VFC = () => {
    const {location} = useHistory() as any
    const [isVisible, setIsVisible] = useState<boolean>(false);
    const [dataInfo, setDataInfo] = useState<any>(null);
    const [memberName, setMemberName] = useState<string|undefined>(undefined);
    const [teamId, setTeamId] = useState<string|undefined>(undefined);
    const [fileType, setFileType] = useState<string|undefined>(undefined);
    const coursewareTypeList = GetDIC('coursewareType');
    const [dataList, setDataList] = useState<any[]>([]);
    const [loading, setLoading] = useState<boolean>(false)

    useEffect(()=>{
        if(!memberName&& !teamId) initData('');
    },[memberName, teamId]); 
    // 获取列表 数据
    const initData= async (fileType:any) =>{
        setLoading(true)
        try{
            const { data, status } = await getPhaseCoursewareList({
                phaseId: location.state?.phaseId,
                type: fileType,
            })
            if(status === '0'){
                setDataList(data);
            }
        }finally{
            setLoading(false)
        }
    }

    const renderSearch = () => (
        <div className="box-search dflex br2">
            <div className="search-items dflex">
                <div className="_items dflex">
                    <label>分类</label>
                    <Select value={fileType} placeholder="请选择" style={{ width: 120 }} onChange={e => initData(e)}>
                        <Option key="" value="">全部</Option>
                        {
                            Object.keys(coursewareTypeList).map( key => {
                                return <Option key={key} value={key}>{coursewareTypeList[key]}</Option>
                            })
                        }
                    </Select>
                </div>
            </div>
        </div>
    )
    return (
        <>
            {renderSearch()}
            <PageContent title={location.state?.name}>
            <Row gutter={[16, 16]} className="box-explain">
                    {
                        dataList.length>0?
                        dataList.map((item: any, index:number) => {
                            return <Col span={5} key={index} onClick={()=>{setDataInfo(item);setIsVisible(true)}}>
                                <div className="pic">
                               {/* {1: "音频", 2: "视频", 3: "文档" */}
                               {/* {item.type==3?
                               <img src={require('@img/pdf.jpg')} />
                               :<video src={FILe_URL+item.pic}/>
                               } */}
                               {item.type==1 && <img src={item.coverPic?FILe_URL+item.coverPic:require('@img/audio.jpg')} className={!item.coverPic?'defaultPic1':''}  />}
                               {item.type==2 && <img src={item.coverPic?FILe_URL+item.coverPic:require('@img/vedio.jpg')} className={!item.coverPic?'defaultPic2':''} />}
                               {item.type==3 &&  <img src={item.coverPic?FILe_URL+item.coverPic:require('@img/pdf.jpg')} className={!item.coverPic?'defaultPic3':''} />}
                               </div>
                               <p className="name">{item.name}</p>
                            </Col>
                        })
                        :
                        <Empty />
                    }
                </Row>
            </PageContent>
            
            {isVisible && <Edit dataInfo={dataInfo} isVisible={isVisible} onCancel={()=>{
                setIsVisible(false)
            }} />}
        </>
    )
}
export default Explain